<template>
  <auxiliarys
    :moduleId="props.id"
    :imgBackground="store.styleInfo.auxiliaryColor"
    :exhibitBackground="store.styleInfo.themeColor"
    @emitExhibits="emitExhibits"
  />

  <div class="exhibits-box3">
    <div class="exhibits-content">
      <t-row :gutter="20">
        <t-col
          :xs="4"
          :sm="4"
          :md="4"
          :lg="3"
          :xl="3"
          v-for="(item, index) in list"
          :key="item.id"
          @mouseenter="imgEnter(index, list)"
          @mouseleave="imgLeave(index, list)"
        >
          <div class="exhibits-item" @click="pathInfo(item.id)">
            <div style="width: 280px; height: 280px">
              <img
                :style="{ background: store.styleInfo.auxiliaryColor }"
                class="t-image--fit-contain t-image--position-center"
                :src="$filters.getLinkUrl(item.coverUrl + '?imageView2/2/w/280/h/280/format/webp')"
                alt=""
              />
              <div class="shadow"></div>
            </div>
            <div class="item-title">
              <span :class="'titleText' + item.id">{{ item.name }}</span>
              <div class="line" :class="'line' + item.id"></div>
            </div>
          </div>
        </t-col>
      </t-row>
      <!-- <div class="is-null-box" v-else>
        <span>暂无展品</span>
      </div> -->
    </div>
    <t-row v-if="total > 12">
      <t-col
        :span="12"
        :class="{
          't-pagination0': store.styleInfo.themeColor == '#CFBDA8',
          't-pagination1': store.styleInfo.themeColor == '#8F9EBF',
          't-pagination2': store.styleInfo.themeColor == '#B9463F',
          't-pagination3': store.styleInfo.themeColor == '#343029',
          't-pagination4': store.styleInfo.themeColor == '#171719',
        }"
      >
        <t-pagination
          style="margin-bottom: 80px"
          v-model="parmas.pageNo"
          v-model:pageSize="parmas.pageSize"
          :total="total"
          :showPageSize="false"
          show-jumper
          @change="onChange"
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </t-col>
    </t-row>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pageChildItem3',
});
</script>
<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../../route';
import { urls } from '@/utils/request/upload';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import { ref, watch, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';
import { imgEnter, imgLeave } from '@/pages/templatePage/components/Subunit/component/hover';
import auxiliarys from './auxiliarys/index.vue';
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const { childModel, tabvalue, styleInfo } = storeToRefs(store);
const parmas = reactive({
  pageSize: 12,
  pageNo: 1,
  id: 0,
  value: '',
});
const total = ref(0);
const list = ref([]);
const exhibitsContentHeight = ref(0); //class="exhibits-content" 的高度
const info = ref({
  children: [],
  id: 0,
  level: 0,
  number: 3,
  parentId: 0,
  remarks: '',
  sort: 0,
  text: '',
  type: 46,
  value: '',
});
info.value = store.childModel;
const props = defineProps({
  id: Number,
});
const init = async () => {
  // console.log('111', props.id);

  parmas.id = props.id;
  let res = await moduleShowpieces(localStorage.getItem('projectId'), parmas);
  // console.log(res.data);
  list.value = res.data.data;
  // exhibitsContentHeight.value = Math.ceil(list.value.length / 4) * 280;
  total.value = res.data.total;
};
init();
const onPageSizeChange = (size) => {
  // console.log('page-size:', size);
  // MessagePlugin.success(`pageSize变化为${size}`);
  init();
};

const onCurrentChange = (index, pageInfo) => {
  // MessagePlugin.success(`转到第${index}页`);
  // console.log(pageInfo);
  init();
};
const pathInfo = (e: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: parmas.id },
  });
};
//点击辅助信息展品跳转
const emitExhibits = (moduleId: number, showpieceid: number) => {
  router.push({
    name: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: {
      id: showpieceid,
      moduleId: moduleId,
    },
  });
};
const onChange = (pageInfo) => {
  // console.log(pageInfo);
};
watch(
  () => styleInfo,
  (value) => {
    if (route.query.childId) {
      const foundElement = styleInfo.value.moduleList.find((item) => item.id === Number(route.query.childId));
      // console.log(foundElement, 'foundElement--------');

      store.setchildModel(foundElement);
    } else {
      // const foundElement = styleInfo.value.moduleList.find((item) => item.id === childModel.value.id);
      // store.setchildModel(foundElement);
    }
  },
  { immediate: true, deep: true },
);
watch(
  () => childModel,
  (value) => {
    info.value = store.childModel;
  },
  { deep: true },
);
watch(
  () => tabvalue,
  (value) => {
    init();
  },
  { deep: true },
);
watch(
  () => props.id,
  (value) => {
    init();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.title-box {
  font-size: 17px;
  // font-family: SourceHanSerif;
  // font-weight: 500;
  color: #333333;
  line-height: 32px;
  margin-top: 50px;
}
.exhibits-box3 {
  width: 1180px;

  margin: auto;
  margin-top: 80px;
}
.t-row {
  margin: 0;
}
.exhibits-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: pointer;
  div {
    // background: #f0e9e1;
    overflow: hidden;
    transition: all 0.5s;
  }
  img {
    height: 280px;
    width: 280px;
    transition: all 0.5s;
    // height: 210px;
    // max-height: 210px;
  }
}
.line {
  width: 0px;
  height: 1px;
  background: #000;
  transform: all 0.5s;
  margin: auto;
}
.shadow {
  width: 280px;
  height: 280px;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.5s;
  z-index: 99;
  cursor: pointer;
  // border-radius: 50%;
}
.exhibits-item:hover .shadow {
  background: rgba(0, 0, 0, 0.4);
}
.exhibits-item:hover img {
  transform: scale(1.1);
}
.item-title {
  width: 100%;
  padding: 24px;
  padding-top: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  span {
    font-size: 18px;
    // font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    // font-weight: 500;
    color: #333333;
    line-height: 28px;
  }
}
.exhibits-content {
  // margin-top: 50px;
  padding-bottom: 80px;
}
.is-null-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 50px 0;
  span {
    font-size: 24px;
    // font-family: SourceHanSerif;
    // font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
    line-height: 22px;
  }
}
/deep/.t-col {
  margin-bottom: 0;
}
.t-pagination0 {
  :deep(.t-is-current) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #cfbda8 !important;
    border-color: #cfbda8 !important;
  }
}
.t-pagination1 {
  :deep(.t-is-current) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
  :deep(.t-pagination__number:active) {
    background: #8f9ebf !important;
    border-color: #8f9ebf !important;
  }
}
.t-pagination2 {
  :deep(.t-is-current) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
  :deep(.t-pagination__number:active) {
    background: #b9463f !important;
    border-color: #b9463f !important;
  }
}
.t-pagination3 {
  :deep(.t-is-current) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #343029 !important;
    border-color: #343029 !important;
  }
}
.t-pagination4 {
  :deep(.t-is-current) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
  :deep(.t-pagination__number:active) {
    background: #171719 !important;
    border-color: #171719 !important;
  }
}
/deep/.t-pagination__number:hover {
  border-color: var(--td-component-border);
  color: #333;
}
/deep/.t-is-current:hover {
  color: var(--td-text-color-anti);
}
/deep/.t-input:hover {
  border-color: var(--td-component-border);
}
/deep/.t-input.t-is-error {
  border-color: var(--td-component-border);
}
/deep/.t-input--focused {
  box-shadow: 0 0 0 0 !important;
}
</style>
